<template>
	<view class="wrap">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="warter warter-left u-padding-left-20 u-padding-right-10 u-margin-top-15"
					@click="goto_article(item)" v-for="(item, index) in leftList" :key="index">
					<!-- 					<u-image border-radius="10" :src="item.picture" :index="index">
						<u-loading slot="loading"></u-loading>
					</u-image> -->
					<u-lazy-load border-radius="10" :image="item.picture" :index="index"></u-lazy-load>
					<view class="u-padding-10"></view>
					<text class="warter-title u-margin-top-10 u-font-2">
						{{item.strategy_title}}
					</text>
					<view class="u-padding-10"></view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="warter warter-right u-padding-left-10 u-padding-right-20 u-margin-top-15"
					@click="goto_article(item)" v-for="(item, index) in rightList" :key="index">
					<!-- <u-image border-radius="10" :src="item.picture" :index="index">
						<u-loading slot="loading"></u-loading>
					</u-image> -->
					<u-lazy-load border-radius="10" :image="item.picture" :index="index"></u-lazy-load>
					<view class="u-padding-10"></view>
					<text class="warter-title u-margin-top-10 u-font-26">
						{{item.strategy_title}}
					</text>
					<view class="u-padding-10"></view>
				</view>
			</template>
		</u-waterfall>
		<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
	</view>
</template>

<script>
	export default {
		name: 'home-waterfall',
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
			}
		},
		props: {
			art_list: {
				type: Array,
				default: () => [],
			},

		},
		methods: {
			goto_article(item){
				this.$u.route({
					url: 'pages/article/index',
					params: {
						id: item.uuid,
					},
				})
			},
			addRandomData(val) {
				this.list = val;
				for (let i = 0; i < val.length; i++) {
					let item = JSON.parse(JSON.stringify(val[i]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warter-title {
		font-weight: 700;
		color: #000000;
		font-size: 28rpx;
	}

	.warter {
		background-color: #ffffff;
		position: relative;
	}
</style>
